<template>
	<view class="bottom-index">
		<!-- 加载中蒙版 -->
		<qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 顶部导航 -->
		<qmy-custom-navbar title="商品详情"></qmy-custom-navbar>
		<!-- #endif -->
		<!-- 轮播 -->
		<view :style="{paddingTop:menuObject.top + menuObject.height + 8 +'px'}" class="w-100">
			<z-swiper ref="zSwiper" v-model="goodsInfo.goods_banner" :options="options">
				<z-swiper-item v-for="(item,index) in goodsInfo.goods_banner" :key="index">
					<image @click="$previewImage(goodsInfo.goods_banner,index)" v-if="item.type === 'image'"
						class="banner-image" :src="item.url" mode="aspectFill"></image>
					<video v-else-if="item.type === 'video'" class="banner-video" :src="item.url" :poster="item.cover"
						mode="widthFix" object-fit="cover" enable-play-gesture loop></video>
				</z-swiper-item>
			</z-swiper>
		</view>
		<!-- 商品信息部分 -->
		<view class="goods-info">
			<image src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/bl.png"
				class="w-100 h-60 pos-abso img-min" />
			<view class="price-box">
				<view class="ali-item-bas">
					<text class="price">¥{{goodsInfo.default_price/100}}</text>
					<text class="original-price"
						v-if="goodsInfo.original_price">¥{{goodsInfo.original_price/100}}</text>
				</view>
				<text class="sold">已售 {{goodsInfo.total_sell_count || 0}}</text>
			</view>
			<view class="goods-name">{{goodsInfo.name}}</view>

			<!-- 商品标签 -->
			<view class="tags-box" v-if="goodsInfo.tags && goodsInfo.tags.length > 0">
				<text class="tag" v-for="(tag, index) in goodsInfo.tags" :key="index">{{tag}}</text>
			</view>
		</view>

		<!-- 规格选择/服务 -->
		<view class="goods-options">
			<view class="option-item" @click="openSpecsPopup('buyNow')">
				<text class="option-title">规格</text>
				<view class="option-value flex-x-bet">
					<text>{{selectedSpecsText || '请选择规格数量'}}</text>
					<view class="iconfont ic-you fs-32 col-87"></view>
				</view>
			</view>
			<view class="option-item" v-if="goodsInfo.services && goodsInfo.services.length > 0">
				<text class="option-title">运费</text>
				<view class="option-value">
					<text
						v-if="(goodsInfo.shipping && goodsInfo.shipping.free_shipping) || goodsInfo.shipping.shipping_fee == 0">包邮</text>
					<text v-else-if="goodsInfo.shipping">运费: ¥{{goodsInfo.shipping.shipping_fee/100}}</text>
				</view>
			</view>
			<view class="option-item pb-10" v-if="goodsInfo.services && goodsInfo.services.length > 0">
				<text class="option-title">服务</text>
				<view class="option-value flex-w-wrap">
					<text class="service-tag whi-sp flex-shrink-0 mb-20 mr-20"
						v-for="(service, index) in goodsInfo.services" :key="index">
						<text class="iconfont ic-gou-shi mr-5"></text>{{service}}</text>
				</view>
			</view>
		</view>

		<!-- 商品评价 -->
		<view class="goods-reviews pb-0 pt-10">
			<view class="review-header flex-x-bet">
				<view class="review-title">
					<image class="title-decoration"
						src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/title.png"></image>
					<text class="title-text">商品评价</text>
					<text class="review-count">({{totalCount}})</text>
				</view>
				<view class="more-link" @click="$NavigateTo(`/qmy_user/user/order/evaluateList?id=${goodsInfo._id}`)">
					<text>查看全部</text>
					<text class="iconfont ic-jinru fs-28"></text>
				</view>
			</view>

			<view class="review-list" v-if="reviewList.length > 0">
				<view class="review-item" v-for="(item, index) in reviewList" :key="index">
					<view class="reviewer-info flex-x-bet">
						<view class="reviewer flex-dir-row ali-item-cen">
							<image
								:src="item.user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
								class="reviewer-avatar" mode="aspectFill"></image>
							<text class="reviewer-name">{{item.user_name}}</text>
						</view>
						<view class="review-rating">
							<text class="iconfont ic-aixin1" v-for="i in item.rating" :key="i"></text>
							<text class="iconfont ic-aixin" v-for="i in (5-item.rating)" :key="i"></text>
						</view>
					</view>
					<view class="review-content">{{item.content}}</view>
					<view class="review-images flex-dir-row" v-if="item.images && item.images.length > 0">
						<image v-for="(img, imgIndex) in item.images" :key="imgIndex" :src="img.url" mode="aspectFill"
							class="review-image" @click="$previewImage(item.images, imgIndex)"></image>
					</view>
					<view class="review-date">{{$formatDate(item.create_date)}}</view>
				</view>
			</view>

			<view class="no-review" v-else>
				<text>暂无评价</text>
			</view>
		</view>

		<!-- 商品详情 -->
		<view class="goods-detail">
			<view class="detail-title">
				<image class="title-decoration"
					src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/title.png"></image>
				商品详情
			</view>
			<mp-html :content="goodsInfo.goods_desc || '<p>暂无详情</p>'" />
		</view>

		<!-- 猜你喜欢 -->
		<view class="recommend-products pt-10" v-if="recommendList.length > 0">
			<view class="recommend-header">
				<view class="section-title">
					<image class="title-decoration"
						src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/title.png"></image>
					<text class="title-text">猜你喜欢</text>
				</view>
			</view>

			<view class="recommend-waterfall">
				<view class="recommend-column">
					<view class="recommend-item" v-for="item in recommendList.filter((_, i) => i % 2 === 0)"
						:key="item._id" @click="$NavigateTo(`/pages/detail/goodsDetail?id=${item._id}`)">
						<image :src="item.goods_banner[0].url" mode="widthFix" class="recommend-image"></image>
						<view class="recommend-info">
							<text class="recommend-name text-element-2">{{item.name}}</text>
							<view class="recommend-price-box">
								<text class="recommend-price">¥{{item.default_price/100}}</text>
								<text class="recommend-original-price"
									v-if="item.original_price">¥{{item.original_price/100}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="recommend-column">
					<view class="recommend-item" v-for="item in recommendList.filter((_, i) => i % 2 === 1)"
						:key="item._id" @click="$NavigateTo(`/pages/detail/goodsDetail?id=${item._id}`)">
						<image :src="item.goods_banner[0].url" mode="widthFix" class="recommend-image"></image>
						<view class="recommend-info">
							<text class="recommend-name text-element-2">{{item.name}}</text>
							<view class="recommend-price-box">
								<text class="recommend-price">¥{{item.default_price/100}}</text>
								<text class="recommend-original-price"
									v-if="item.original_price">¥{{item.original_price/100}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="footer bottom-h flex-x-spa">
			<button open-type="share" class="btn-item">
				<text class="iconfont ic-share-line fs-50"></text>
				<text class="fs-24">分享</text>
			</button>
			<view class="btn-item" @click="addToCollect">
				<text class="iconfont fs-50"
					:class="goodsInfo.collect_user_id &&goodsInfo.collect_user_id.includes(userInfo.id)?'ic-favorite-s col-00ba31':'ic-favorite-line'"></text>
				<text class="fs-24">收藏</text>
			</view>
			<view class="btn-item" @click="$NavigateTo('/qmy_user/user/myCart')">
				<text class="iconfont ic-gouwuche1 fs-50"></text>
				<text class="fs-24">购物车</text>
				<view class="cart-badge" v-if="cartCount > 0">{{cartCount}}</view>
			</view>
			<view class="action-btns">
				<button class="add-cart-btn" @click="openSpecsPopup('addCart')">加入购物车</button>
				<button class="buy-now-btn" @click="openSpecsPopup('buyNow')">立即购买</button>
			</view>
		</view>

		<!-- 规格选择弹窗 -->
		<uni-popup ref="specsPopup" type="bottom" backgroundColor="#fff">
			<view class="specs-popup">
				<view class="popup-header">
					<image class="popup-image"
						@click="$previewImage(currentSku.image?currentSku.image:goodsInfo.goods_banner[0],0)"
						:src="currentSku && currentSku.image ? currentSku.image : (goodsInfo.goods_banner && goodsInfo.goods_banner.length > 0 ? goodsInfo.goods_banner[0].url : '')">
					</image>
					<view class="popup-info">
						<view class="popup-price">¥{{currentSku ? currentSku.price/100 : goodsInfo.default_price/100}}
						</view>
						<view class="popup-stock">库存: {{currentSku ? currentSku.stock : getTotalStock()}}</view>
						<view class="popup-selected" v-if="selectedSpecs.filter(item => item !== '').length > 0">
							已选: {{getSelectedSpecsText()}}
						</view>
						<!-- 数量选择 -->
						<view class="quantity-selector">
							<view class="quantity-btn" :class="{ 'disabled': quantity <= 1 }" @click="decreaseQuantity">
								-
							</view>
							<input type="number" class="quantity-input" v-model="quantity" @blur="checkQuantity" />
							<view class="quantity-btn"
								:class="{ 'disabled': quantity >= (currentSku ? currentSku.stock : getTotalStock()) }"
								@click="increaseQuantity">
								+
							</view>
						</view>
					</view>
					<view class="close-btn" @click="closeSpecsPopup">
						<text class="iconfont ic-guanbi"></text>
					</view>
				</view>

				<scroll-view scroll-y class="popup-content">
					<!-- 规格选择区 -->
					<view class="specs-group" v-for="(spec, specIndex) in goodsInfo.specs" :key="specIndex">
						<view class="specs-title">{{spec.name}}</view>
						<view class="specs-values">
							<text v-for="(value, valueIndex) in spec.values" :key="valueIndex"
								:class="['spec-value', isSpecSelected(specIndex, value) ? 'selected' : '', isSpecDisabled(specIndex, value) ? 'disabled' : '']"
								@click="selectSpec(specIndex, value)">{{value}}</text>
						</view>
					</view>
				</scroll-view>

				<view class="popup-footer">
					<button class="confirm-btn" :style="{background:actionType === 'addCart'?'#FFC029':'#14cc60'}"
						@click="confirmSelection">{{actionType === 'buyNow' ? '立即购买' : '加入购物车'}}</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		store
	} from '@/utils/store.js';
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				options: {
					initialSlide: 0, //初始显示的图片下标
					pagination: {
						el: true,
						type: 'progressbar',
						clickable: true,
					},
				},
				dataLoaded: false,
				goodsId: '', // 商品ID
				goodsInfo: {},
				selectedSpecs: [], // 已选择的规格值数组
				currentSku: null, // 当前选中的SKU
				quantity: 1, // 购买数量
				actionType: 'buyNow', // 操作类型：addCart/buyNow
				isFavorite: false, // 是否已收藏
				cartCount: 0, // 购物车商品数量
				selectedSpecsText: '', // 已选规格文本
				reviewList: [], // 商品评价列表
				recommendList: [], // 推荐商品列表
				touchStartY: 0, // 触摸开始Y坐标
				popupHeight: 0, // 弹窗高度
				isMoving: false, // 是否正在移动
				totalCount: 0, // 商品评价总数
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo;;
			},
		},
		onLoad(options) {
			// 获取商品ID
			if (options.id) {
				this.goodsId = options.id;
				this.loadGoodsDetail();
				// 获取商品评价
				this.getGoodsEvaluateList();
			}
			this.getGoodsList();
			// 初始化规格选择数组
			if (this.goodsInfo.specs) {
				this.selectedSpecs = new Array(this.goodsInfo.specs.length).fill('');
			}
			this.getCart();
		},
		onReady() {
			// 在页面渲染完成后，初始化弹窗触摸事件
			this.$nextTick(() => {
				this.initPopupTouchEvents();
			});
		},
		methods: {
			// 加载商品详情
			loadGoodsDetail() {
				this.$Route('get-public-data', !this.dataLoaded).getGoodsDetail(this.goodsId).then((res) => {
					if (!res.data.length) {
						this.$Toast('商品已下架')
						setTimeout(() => this.$NavigateBack(), 1000)
						return
					}
					this.goodsInfo = res.data[0];
					this.selectedSpecs = new Array(this.goodsInfo.specs.length).fill('');
					this.dataLoaded = true;
				}).catch((err) => {
					this.dataLoaded = true;
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			},
			// 获取商品评价
			getGoodsEvaluateList() {
				this.$Route('get-public-data', true).getGoodsEvaluateList({
					filter: {
						goods_id: this.goodsId
					},
					page: 1,
					pageSize: 2
				}).then(res => {
					const {
						data,
						total
					} = res;
					this.reviewList = data;
					this.totalCount = total;
				}).catch(err => {
					console.error('遇到错误:', err);
					let {
						code,
						msg
					} = this.$parseError(err);
					this.$Toast(msg);
				});
			},
			// 加载精选商品数据
			getGoodsList() {
				this.$Route('get-public-data', true).getGoodsList().then((res) => {
					this.recommendList = res.data.recommendList;
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			},
			// 打开规格选择弹窗
			openSpecsPopup(type) {
				this.actionType = type || 'addCart';
				this.$refs.specsPopup.open();
			},

			// 关闭规格选择弹窗
			closeSpecsPopup() {
				this.$refs.specsPopup.close();
			},

			// 选择规格
			selectSpec(specIndex, value) {
				// 检查该规格值是否可选
				if (this.isSpecDisabled(specIndex, value)) return;

				// 如果点击已选中的规格，则取消选择
				if (this.selectedSpecs[specIndex] === value) {
					this.$set(this.selectedSpecs, specIndex, '');
					this.currentSku = null; // 清除当前SKU，允许重新选择
				} else {
					this.$set(this.selectedSpecs, specIndex, value);
				}

				// 更新当前选中的SKU
				this.updateCurrentSku();
			},

			// 更新当前选中的SKU
			updateCurrentSku() {
				// 检查是否已选择所有规格
				const isAllSelected = this.selectedSpecs.every(spec => spec !== '');

				if (isAllSelected) {
					// 查找匹配的SKU
					const sku = this.goodsInfo.skus.find(item => {
						// 使用更可靠的方式比较规格值数组
						const sortedSpecValues = [...item.spec_values].sort();
						const sortedSelectedSpecs = [...this.selectedSpecs].sort();

						return sortedSpecValues.every((val, idx) => val === sortedSelectedSpecs[idx]);
					});

					this.currentSku = sku || null;
				} else {
					this.currentSku = null;
				}

				// 更新已选规格文本
				this.updateSelectedSpecsText();
			},

			// 更新已选规格文本
			updateSelectedSpecsText() {
				if (this.currentSku) {
					this.selectedSpecsText = this.getSelectedSpecsText();
				} else {
					const selectedCount = this.selectedSpecs.filter(spec => spec !== '').length;
					if (selectedCount === 0) {
						this.selectedSpecsText = '请选择规格数量';
					} else {
						const unselectedSpecs = [];
						this.goodsInfo.specs.forEach((spec, index) => {
							if (!this.selectedSpecs[index]) {
								unselectedSpecs.push(spec.name);
							}
						});
						this.selectedSpecsText = `请选择: ${unselectedSpecs.join('、')}`;
					}
				}
			},

			// 获取已选规格文本
			getSelectedSpecsText() {
				if (this.currentSku) {
					return this.currentSku.spec_values.join('、');
				} else {
					const selectedValues = [];
					this.goodsInfo.specs.forEach((spec, index) => {
						if (this.selectedSpecs[index]) {
							selectedValues.push(`${spec.name}:${this.selectedSpecs[index]}`);
						}
					});
					return selectedValues.join('、');
				}
			},

			// 判断规格是否已选中
			isSpecSelected(specIndex, value) {
				return this.selectedSpecs[specIndex] === value;
			},

			// 判断规格是否不可选（库存为0）
			isSpecDisabled(specIndex, value) {
				// 获取已选择的其他规格
				const otherSelectedSpecs = [...this.selectedSpecs];
				otherSelectedSpecs[specIndex] = value;

				// 检查其他规格是否已全部选择
				const unselectedIndex = otherSelectedSpecs.findIndex(spec => spec === '');
				if (unselectedIndex !== -1 && unselectedIndex !== specIndex) {
					return false; // 还有其他规格未选择，不禁用
				}

				// 判断当前选择的组合是否有对应的SKU
				const hasSku = this.goodsInfo.skus.some(sku => {
					// 检查是否与当前规格值匹配
					return sku.spec_values.every((specValue, idx) => {
						// 如果当前索引是我们正在检查的规格，则使用新值进行比较
						if (idx === specIndex) {
							return specValue === value;
						}
						// 如果其他位置未选择，则该维度不做比较限制
						if (otherSelectedSpecs[idx] === '') {
							return true;
						}
						// 否则比较其他已选的规格值
						return specValue === otherSelectedSpecs[idx];
					}) && sku.stock > 0;
				});

				return !hasSku;
			},

			// 增加数量
			increaseQuantity() {
				const maxStock = this.currentSku ? this.currentSku.stock : this.getTotalStock();
				if (this.quantity < maxStock) {
					this.quantity++;
				} else {
					// 已达最大库存，轻震动反馈
					uni.vibrateShort();
					uni.showToast({
						title: '已达最大库存',
						icon: 'none'
					});
				}
			},

			// 减少数量
			decreaseQuantity() {
				if (this.quantity > 1) {
					this.quantity--;
				} else {
					// 已达最小数量，轻震动反馈
					uni.vibrateShort();
				}
			},

			// 获取总库存
			getTotalStock() {
				return this.goodsInfo.skus ? this.goodsInfo.skus.reduce((total, sku) => total + Number(sku.stock), 0) : 0;
			},

			// 检查数量范围
			checkQuantity() {
				const maxStock = this.currentSku ? this.currentSku.stock : this.getTotalStock();
				// 确保数量不小于1
				if (this.quantity < 1 || isNaN(this.quantity)) {
					this.quantity = 1;
				}
				// 确保数量不超过最大库存
				else if (this.quantity > maxStock) {
					this.quantity = maxStock;
					uni.showToast({
						title: '已达最大库存',
						icon: 'none'
					});
				}
				// 确保数量为整数
				this.quantity = parseInt(this.quantity);
			},

			// 确认选择
			confirmSelection() {
				// 检查是否选择了所有规格
				const selectedCount = this.selectedSpecs.filter(spec => spec !== '').length;

				if (selectedCount === 0) {
					// 没有选择任何规格
					this.$Toast('请选择规格');
					return;
				}

				if (!this.currentSku) {
					// 已选择部分规格但未完成全部选择
					const unselectedSpecs = [];
					this.goodsInfo.specs.forEach((spec, index) => {
						if (!this.selectedSpecs[index]) {
							unselectedSpecs.push(spec.name);
						}
					});

					if (unselectedSpecs.length > 0) {
						this.$Toast(`请选择${unselectedSpecs.join('、')}`);
						return;
					}
				}

				// 检查库存
				if (this.currentSku && this.quantity > this.currentSku.stock) {
					this.$Toast('库存不足');
					return;
				}

				// 执行对应操作
				if (this.actionType === 'buyNow') {
					this.buyNow();
				} else {
					this.addToCart();
				}

				// 关闭弹窗
				this.closeSpecsPopup();
			},

			// 获取购物车
			getCart() {
				this.$Route('get-private-data', true).getUserCartInfo().then((res) => {
					this.cartCount = res.data.total_quantity;
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
				});
			},

			// 加入购物车
			addToCart() {
				this.$Route('add-private-data').addToCart({
					goods_id: this.goodsInfo._id,
					sku_id: this.currentSku.sku_id,
					quantity: this.quantity
				}).then((res) => {
					this.$Toast(res.msg);
					setTimeout(() => {
						this.getCart()
					}, 1000)
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
						}
					}, 1600);
				});
			},

			// 立即购买
			buyNow() {
				// 准备完整的商品信息数据
				const skuInfo = {
					goods_id: this.goodsInfo._id,
					sku_id: this.currentSku.sku_id,
					goods_name: this.goodsInfo.name,
					image: this.currentSku.image || (this.goodsInfo.goods_banner && this.goodsInfo.goods_banner
						.length > 0 ? this.goodsInfo.goods_banner[0].url : ''),
					price: this.currentSku.price,
					specs: this.selectedSpecs.filter(spec => spec !== ''),
					specs_text: this.getSelectedSpecsText(),
					quantity: this.quantity,
					stock: this.currentSku.stock,
					free_shipping: this.goodsInfo.shipping && this.goodsInfo.shipping.free_shipping || false,
					shipping_fee: this.goodsInfo.shipping && this.goodsInfo.shipping.shipping_fee || 0
				};
				// 跳转到订单确认页面，传递完整商品信息
				this.$NavigateTo(
					`/pages/detail/submitOrder?type=buy&skuInfo=${encodeURIComponent(JSON.stringify(skuInfo))}`);
			},

			// 收藏/取消收藏
			addToCollect() {
				// 收藏节流
				this.$debounce(() => {
					// 收藏或取消收藏时先更新收藏状态收藏数，等待返回在确认是否复原
					this.goodsInfo.collect_user_id.includes(this.userInfo.id) ? this.goodsInfo.collect_user_id
						.splice(this.goodsInfo.collect_user_id.indexOf(this.userInfo.id), 1) : this.goodsInfo
						.collect_user_id.push(this.userInfo.id);
					this.$Route('add-private-data', true).addToCollect(this.goodsInfo, 'goods').then((res) => {})
						.catch((err) => {
							// 如果失败，复原数据
							this.goodsInfo.collect_user_id.includes(this.userInfo.id) ? this.goodsInfo
								.collect_user_id.splice(this.goodsInfo.collect_user_id.indexOf(this.userInfo
									._id), 1) : this.goodsInfo.collect_user_id.push(this.userInfo.id);
							console.error('遇到错误:', err); // 打印错误信息
							let {
								code,
								msg
							} = this.$parseError(err); // 调用公共解析方法
							this.$Toast(msg);
							setTimeout(() => {
								if (code === 401) {
									this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
								}
							}, 1000);
						});
				}, 1000, true, "addToCollect")
			},

			// 加载推荐商品
			loadRecommendProducts() {
				// 实际开发中，应该从服务器获取推荐商品数据
				// 这里使用模拟数据
			},

			// 初始化弹窗触摸事件
			initPopupTouchEvents() {
				const popup = this.$refs.specsPopup;
				if (popup && popup.$el) {
					const popupEl = popup.$el.querySelector('.specs-popup');
					if (popupEl) {
						popupEl.addEventListener('touchstart', this.handleTouchStart);
						popupEl.addEventListener('touchmove', this.handleTouchMove);
						popupEl.addEventListener('touchend', this.handleTouchEnd);
					}
				}
			},

			// 处理触摸开始事件
			handleTouchStart(e) {
				this.touchStartY = e.touches[0].clientY;
				this.isMoving = false;
			},

			// 处理触摸移动事件
			handleTouchMove(e) {
				const currentY = e.touches[0].clientY;
				const diffY = currentY - this.touchStartY;

				// 只有向下滑动才处理
				if (diffY > 0) {
					this.isMoving = true;
					const popup = this.$refs.specsPopup;
					if (popup && popup.$el) {
						const popupEl = popup.$el.querySelector('.specs-popup');
						if (popupEl) {
							// 设置过渡效果
							popupEl.style.transition = 'none';
							// 跟随手指移动
							popupEl.style.transform = `translateY(${diffY}px)`;
						}
					}
				}
			},

			// 处理触摸结束事件
			handleTouchEnd(e) {
				if (!this.isMoving) return;

				const popup = this.$refs.specsPopup;
				if (popup && popup.$el) {
					const popupEl = popup.$el.querySelector('.specs-popup');
					if (popupEl) {
						// 恢复过渡效果
						popupEl.style.transition = 'transform 0.3s ease-out';

						const currentY = e.changedTouches[0].clientY;
						const diffY = currentY - this.touchStartY;

						// 如果滑动距离超过100px，则关闭弹窗
						if (diffY > 100) {
							this.closeSpecsPopup();
						} else {
							// 否则恢复原位
							popupEl.style.transform = 'translateY(0)';
						}
					}
				}

				this.isMoving = false;
			}
		}
	}
</script>

<style lang="scss">
	// 轮播图样式
	.banner-image,
	.banner-video {
		width: 100%;
		height: 750rpx;
	}

	// 商品信息区域
	.goods-info {
		background-color: #fff;
		margin-bottom: 20rpx;
		position: relative;
		z-index: 1;

		.img-min {
			top: -60rpx;
			z-index: 1;
			height: 60rpx;
		}

		.price-box {
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.price {
				font-size: 48rpx;
				color: #FF3B30;
				font-weight: bold;
			}

			.original-price {
				font-size: 28rpx;
				color: #999;
				text-decoration: line-through;
				margin-left: 15rpx;
			}

			.sold {
				font-size: 24rpx;
				color: #999;
				margin-left: auto;
			}
		}

		.goods-name {
			padding: 0 30rpx;
			font-size: 34rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 20rpx;
			line-height: 1.4;
		}

		.tags-box {
			padding: 0 30rpx;
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 20rpx;

			.tag {
				font-size: 22rpx;
				color: #ffffff;
				background: #14cc60;
				height: 40rpx;
				line-height: 40rpx;
				padding: 0 15rpx;
				border-radius: 6rpx;
				margin-right: 15rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	// 商品选项区域
	.goods-options {
		background-color: #fff;
		margin-bottom: 20rpx;

		.option-item {
			display: flex;
			padding: 30rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.option-title {
				min-width: 120rpx;
				font-size: 28rpx;
				color: #666;
			}

			.option-value {
				flex: 1;
				display: flex;
				align-items: center;
				color: #333;
				font-size: 28rpx;

				.service-tag {
					background-color: #ecfaff;
					color: #5cc1ff;
					font-size: 26rpx;
					padding: 0 15rpx;
					height: 60rpx;
					line-height: 60rpx;
					display: flex;
					align-items: center;
					text-align: center;
					border-radius: 10rpx;
				}
			}
		}
	}

	// 通用文本溢出样式
	.text-element-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		word-break: break-all;
	}

	// 商品评价区域
	.goods-reviews {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;

		.review-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.review-title {
				display: flex;
				align-items: center;

				.title-decoration {
					width: 50rpx;
					height: 50rpx;
				}

				.title-text {
					font-size: 32rpx;
					color: #333;
					font-weight: bold;
				}

				.review-count {
					font-size: 28rpx;
					color: #999;
					margin-left: 10rpx;
				}
			}

			.more-link {
				display: flex;
				align-items: center;
				font-size: 27rpx;
				color: #14cc60;

				.iconfont {
					margin-left: 5rpx;
				}
			}
		}

		.review-list {
			.review-item {
				position: relative;
				margin-bottom: 30rpx;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #f5f5f5;

				&:last-child {
					margin-bottom: 0;
					border-bottom: none;
				}

				.reviewer-info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 15rpx;

					.reviewer {
						display: flex;
						align-items: center;

						.reviewer-avatar {
							width: 64rpx;
							height: 64rpx;
							border-radius: 50%;
							margin-right: 15rpx;
							border: 1px solid #f0f0f0;
						}

						.reviewer-name {
							font-size: 28rpx;
							color: #333;
							font-weight: 500;
						}
					}

					.review-rating {
						display: flex;
						align-items: center;

						.iconfont {
							font-size: 30rpx;
							color: #FF3B30;
						}

						.iconfont.ic-nice-line {
							color: #E0E0E0;
						}
					}
				}

				.review-content {
					font-size: 28rpx;
					color: #333;
					line-height: 1.6;
					margin-bottom: 15rpx;
				}

				.review-images {
					display: flex;
					flex-wrap: wrap;
					margin-bottom: 15rpx;

					.review-image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
						margin-right: 15rpx;
						margin-bottom: 15rpx;
						box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
					}
				}

				.review-date {
					font-size: 22rpx;
					color: #999;
				}
			}
		}

		.no-review {
			padding: 50rpx 0;
			text-align: center;
			font-size: 28rpx;
			color: #999;
		}
	}

	// 商品详情
	.goods-detail {
		background-color: #fff;
		margin-bottom: 20rpx;

		.detail-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			display: flex;
			align-items: center;
			padding: 30rpx;

			.title-decoration {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	// 推荐商品区域
	.recommend-products {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.recommend-header {
			margin-bottom: 30rpx;

			.section-title {
				display: flex;
				align-items: center;

				.title-decoration {
					width: 50rpx;
					height: 50rpx;
				}

				.title-text {
					font-size: 32rpx;
					color: #333;
					font-weight: bold;
				}
			}
		}

		.recommend-waterfall {
			display: flex;
			justify-content: space-between;

			.recommend-column {
				width: 48%;

				.recommend-item {
					margin-bottom: 20rpx;
					background-color: #fff;
					border-radius: 16rpx;
					overflow: hidden;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
					transition: transform 0.2s ease, box-shadow 0.2s ease;

					&:active {
						transform: scale(0.98);
						box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
					}

					.recommend-image {
						width: 100%;
						border-radius: 16rpx 16rpx 0 0;
					}

					.recommend-info {
						padding: 16rpx;

						.recommend-name {
							font-size: 26rpx;
							color: #333;
							margin-bottom: 10rpx;
							line-height: 1.4;
							height: 72rpx;
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}

						.recommend-price-box {
							display: flex;
							align-items: baseline;

							.recommend-price {
								font-size: 28rpx;
								color: #FF3B30;
								font-weight: bold;
								margin-right: 10rpx;
							}

							.recommend-original-price {
								font-size: 22rpx;
								color: #999;
								text-decoration: line-through;
							}
						}
					}
				}
			}
		}
	}


	// 底部操作栏
	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding-top: 30rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 80;

		button {
			padding: 0 !important;
			margin: 0 !important;
		}

		.btn-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #fff;
			line-height: 40rpx;
			justify-content: center;
			position: relative;

			text {
				color: #666;
			}

			.cart-badge {
				position: absolute;
				top: -8rpx;
				right: 0rpx;
				background-color: #FF3B30;
				color: #fff;
				font-size: 18rpx;
				min-width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;
				border-radius: 15rpx;
				padding: 0 6rpx;
			}
		}

		.action-btns {
			display: flex;
			height: 80rpx;
			border-radius: 10rpx;
			overflow: hidden;

			button {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				margin: 0;
				font-size: 28rpx;
				transition: all 0.2s ease;
				position: relative;
				width: 230rpx;
				overflow: hidden;
				border: none;
				border-radius: 0rpx !important;

				&::after {
					display: none;
				}

				&:active {
					transform: scale(0.98);
					opacity: 0.9;
				}
			}

			.add-cart-btn {
				background-color: #FFC029;
				color: #fff;
			}

			.buy-now-btn {
				background-color: #14cc60;
				color: #fff;
			}
		}
	}

	// 规格弹窗
	.specs-popup {
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		max-height: 80vh;
		display: flex;
		flex-direction: column;
		position: relative;

		.popup-header {
			display: flex;
			padding: 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
			position: relative;

			.popup-image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 16rpx;
				margin-right: 20rpx;
				background-color: #f7f7f7;
			}

			.popup-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.popup-price {
					font-size: 40rpx;
					color: #FF3B30;
					font-weight: bold;
				}

				.popup-stock,
				.popup-selected {
					font-size: 24rpx;
					color: #666;
				}

				.quantity-selector {
					display: flex;
					align-items: center;
					height: 45rpx;
					line-height: 45rpx;
					overflow: hidden;
					border-radius: 10rpx;
					margin-top: 10rpx;

					.quantity-btn {
						width: 45rpx;
						height: 45rpx;
						line-height: 45rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #f7f7f7;
						position: relative;
						transition: all 0.2s;

						&:active {
							background-color: #bfc1c2;
						}

						&.disabled {
							color: #ccc;
							background-color: #fafafa;
							pointer-events: none;
						}

						text {
							font-size: 26rpx;
						}
					}

					.quantity-input {
						width: 60rpx;
						height: 45rpx;
						line-height: 45rpx;
						text-align: center;
						margin: 0 6rpx;
						font-size: 26rpx;
						background-color: #f7f7f7;
					}
				}
			}

			.close-btn {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;

				text {
					font-size: 36rpx;
					color: #666;
				}
			}
		}

		.popup-content {
			flex: 1;
			padding: 30rpx;
			max-height: 60vh;
			padding-bottom: 0rpx;

			.specs-group {
				margin-bottom: 30rpx;

				.specs-title {
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.specs-values {
					display: flex;
					flex-wrap: wrap;

					.spec-value {
						padding: 15rpx 30rpx;
						background-color: #f7f7f7;
						border-radius: 10rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						font-size: 26rpx;
						color: #333;
						transition: all 0.2s ease;
						position: relative;

						&.selected {
							background-color: rgba(20, 204, 96, 0.1);
							color: #14cc60;
						}

						&.disabled {
							color: #ccc;
							background-color: #f5f5f5;
							border-color: #eee;
							pointer-events: none;
						}

						&:active {
							transform: scale(0.95);
						}
					}
				}
			}
		}

		.popup-footer {
			padding: 0 30rpx;

			.confirm-btn {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				color: #fff;
				font-size: 28rpx;
				border-radius: 40rpx;
				transition: all 0.2s ease;

				&:active {
					transform: scale(0.98);
					opacity: 0.9;
				}
			}
		}
	}

	.specs-popup::before {
		content: '';
		position: absolute;
		top: -55rpx;
		z-index: -1;
		left: 0;
		width: 100%;
		height: 50%;
		background-color: white;
		transform: skewY(3deg);
		border-radius: 40rpx 40rpx 0 0;
	}
</style>
